<script setup lang="ts">
import { useDark } from '@vueuse/core';

const props = defineProps<{
  active: boolean;
}>();

const dark = useDark();
</script>

<template>
  <svg t="1753359859078" class="icon w-[20px] h-[20px] mb-1" viewBox="0 0 1024 1024" version="1.1"
    xmlns="http://www.w3.org/2000/svg" p-id="4640">
    <path
      d="M204.8 341.333333h614.4a136.533333 136.533333 0 0 1 136.533333 136.533334v409.6a136.533333 136.533333 0 0 1-136.533333 136.533333H204.8a136.533333 136.533333 0 0 1-136.533333-136.533333V477.866667a136.533333 136.533333 0 0 1 136.533333-136.533334z m273.066667 369.664V853.333333a34.133333 34.133333 0 0 0 68.266666 0v-142.336a102.434133 102.434133 0 1 0-68.266666 0z"
      :fill="!props.active ? dark ? '#fff' : '#00000022' : '#1989fa'" p-id="4641"></path>
    <path
      d="M512 0a273.066667 273.066667 0 0 1 273.066667 273.066667v136.533333H238.933333V273.066667a273.066667 273.066667 0 0 1 273.066667-273.066667z m204.8 341.333333V273.066667A204.8 204.8 0 1 0 307.2 273.066667v68.266666h409.6z"
      :fill="!props.active ? dark ? '#fff' : '#00000022' : '#1989fa'" p-id="4642"></path>
  </svg>
</template>

<style lang="scss" scoped></style>
